<template>
	<view>
		<view class="flex">
			<view class="ipt">
				<input class="uni-input" v-model="text" placeholder="请输入评论内容" />
			</view>
			<button type="primary" size="mini" @tap="issue">发表</button>
		</view>
		<view class="cnt">
			<view class="title">精彩评论</view>
			<!-- 使用unicloud-db 操作数据库 -->
			<unicloud-db ref="udb" v-slot:default="{data, loading, error, hasMore,options}" collection="comment"
				field="content,create_date,isGive" where="" orderby="create_date desc">
				<view v-if="error">{{error.message || "记载出错"}}</view>
				<view class="loading" v-else-if="loading">努力加载汇总🌟🌟</view>
				<view v-else>
					<view class="card" v-for="site in  data" :key="site._id">
						<view class="card_img"></view>
						<view>
							<view class="card_id">{{site._id}}</view>
							<view class="card_date">{{parseTime(site.create_date)}}</view>
							<view class="card_cnt">{{site.content}}</view>
							<view>
								<image v-if="!site.isGive" class="img" src="/static/love.png" @tap="addLove(site._id)"></image>
								<text v-else>❤️</text>
							</view>
						</view>
					</view>
				</view>
				<view class="empty" v-if="!hasMore && !loading">小主没有更多的评论了哦</view>
			</unicloud-db>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from "@/utils/date.js"
	export default {
		data() {
			return {
				text: "",
				parseTime
			}
		},
		onLoad() {

		},
		methods: {
			issue() {
				if (!this.text) return;
				// 引入数据库对象
				const db = uniCloud.database();
				//获取search-list 表
				const searchLogDb = db.collection("comment");
				// 请求服务端数据，增加评论记录
				searchLogDb.add({
					content: this.text,
					create_date: Date.now(),
					isGive: false
				})
				// 新增成功刷新数据
				this.$refs.udb.refresh();
			},
			addLove(id, value) {
				// 更新此条记录状态
				const params = {
					isGive: !value,
				}
				this.$refs.udb.update(id, params, {
					toastTitle: value ? "取消成功" : "点赞成功",
					success: (res) => {
						const {
							code,
							message
						} = res;
						this.$refs.udb.refresh()
					},
					fail: (err) => { // 更新失败后的回调
						const {
							message
						} = err
					},
					complete: () => {} // 完成后的回调
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: rgb(246, 247, 251);
	}
</style>
<style lang="scss" scoped>
	.flex {
		display: flex;
		padding: 24rpx;
		align-items: center;
		justify-content: space-between;
	}

	.cnt {
		padding: 24rpx;
	}

	.ipt {
		display: flex;
		align-items: center;
		width: 70%;
		height: 54rpx;
		border: 1px solid #ccc;
		// padding: 24rpx;
		border-radius: 16rpx;
	}

	.uni-input {
		padding: 0 10rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000;
		margin-bottom: 24rpx;
	}

	.card {
		display: flex;
		flex-direction: row;
		margin-bottom: 30rpx;

		&_img {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background-color: #FE4A48;
			margin-right: 24rpx;
		}

		&_id {
			font-size: 24rpx;
			color: rgba(0, 144, 255, 1);
			margin-bottom: 4rpx;
		}

		&_date {
			font-size: 18rpx;
			color: #666;
		}

		&_cnt {
			font-style: normal;
			line-height: 44rpx;
			font-size: 28rpx;
			margin-top: 8rpx;
		}
	}

	.empty,
	.loading {
		text-align: center;
		padding: 24rpx;
		color: #666;
		font-size: 24rpx;
	}

	.img {
		width: 24rpx;
		height: 24rpx;
	}
</style>
